<template>
  <div class="withdrawal page" ref="webview">
    <div class="nav-bar">
      <van-nav-bar title="提现记录" left-arrow fixed @click-left="$router.go(-1)" />
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" v-if="dataList.length===0" style="height:200px">暂无数据</div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <div class="list" v-for="(record, index) in dataList" :key="'record-item-' + index">
            <div class="info">
              <div class="name">{{ record.payee_bank_name }}（{{ record.payee_account }}）</div>
              <div class="time">{{ record.create_time }}</div>
            </div>
            <div class="state">
              <span class="amount">{{ record.amount | toDecimalByCutoffWithoutOmit}}</span>
              <span class="text c1">{{ record.status_str }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'withdrawal',
  data () {
    return {
      apiType: 'user',
      apiUrl: 'withdrawRecord'
    };
  },
  mixins: [mixins],
  created () {
    this.getList('withdrawRecord', true);
  },
  methods: {
    goDetails () {
      this.$router.push({ 'path': '/address/edit', query: { id: 1 } });
    }
  }
};
</script>
<style lang="less" scoped>
.withdrawal {
  height: 100%;
  .content {
    height: calc(100% - 92px);
    box-sizing: border-box;
    overflow: auto;
    background-color: #fff;
    .list {
      margin: 0 40px;
      padding: 40px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(238, 238, 238, 0.8); /*no*/
      .info {
        .name {
          color: #353535;
          font-size: 30px;
        }
        .time {
          font-size: 24px;
          padding-top: 10px;
          display: block;
          color: #959595;
        }
      }
      .state {
        text-align: right;
        .amount {
          color: #ff0000;
          font-size: 30px;
          display: block;
        }
        .text {
          color: #959595;
          padding-top: 10px;
          display: block;
          font-size: 24px;
        }
        .text.c1 {
          color: #917eff;
        }
      }
    }
  }
}
</style>
